<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主播数据管理平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        /* 主体区 */
        * {
            margin:0;
            padding:0;
        }
        .home_box{
            height: 100vh;
        }
        .el-menu a {
            text-decoration: none;
            color: whitesmoke;
            font-size: 16px;
        }
        /* 头部标题栏 */
        .el-header{
            width: 100%;
            background:#a0cfff;
            display: flex;
            justify-content: space-between;
            color: #fff;
            align-items: center;
            padding: 0 10px;
        }
        .el-header div{
            display: flex;
            align-items: center;
        }
        .el-header div span{
            margin-left: 20px;
        }
        .el-header div img{
            width: 60px;
        }
        .el-header div .el-avatar img{
            width: 30px;
        }
        .el-header .el-avatar {
            margin-right: 10px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-dropdown {
            vertical-align: top;
        }
        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .usersetting {
            padding-left: 5px;
            padding-top: 10px;
        }
        /* 侧边栏 */
        .el-aside{
            background-color:#a0cfff;
        }
        .el-aside .el-menu{
            border-right: none;
        }
        /* 内容区 */
        .card-content {
            display: flex;
        }
        .anchorTitle {
            flex-wrap: wrap-reverse;
        }
       
        .data-card {
            margin-right: 20px;
            flex: 9;
        }
        .box-card {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container class="home_box">
            <el-header>
              <div>
                <img src="../../static/img/logo.png" alt="">
                <span>XX公司直播数据管理系统</span>
              </div>
              <div>
                <el-avatar :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                <el-dropdown>
                  <el-button type="warning" class="usersetting">
                      小明<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>账号设置</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
            <el-container>
                <el-aside width="160px">
                    <el-menu>
                        <el-row>
                            <el-col :span="24">
                              <el-menu
                                default-active="3"
                                class="el-menu-vertical-demo"
                                background-color="#e6a23c"
                                text-color="white"
                                active-text-color="#a0cfff">
                                <el-menu-item index="1" @click="toUsers">
                                    <i class="el-icon-location"></i>
                                    <span slot="title">工作台</span>
                                  </el-menu-item>
                                <el-menu-item index="2" @click="toAnchors">
                                  <i class="el-icon-menu"></i>
                                  <span slot="title">主播管理</span>
                                </el-menu-item>
                                <el-menu-item index="3" @click="toData">
                                  <i class="el-icon-document"></i>
                                  <span slot="title">数据中心</span>
                                </el-menu-item>
                                <el-menu-item index="4" @click="toTask">
                                  <i class="el-icon-setting"></i>
                                  <span slot="title">任务管理</span>
                                </el-menu-item>
                              </el-menu>
                            </el-col>
                        </el-row>
                    </el-menu>
                  </el-aside>
              <el-main>
                <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1">主播分析表</el-menu-item>
                    <el-menu-item index="2">招募分析表</el-menu-item>
                    <el-menu-item index="3">运营分析表</el-menu-item>
                </el-menu>
                <div class="card-content">
                    <!--   数据展示区  -->
                    <div class="data-card">
                        <el-card class="box-card turnoverData">
                            <!-- 条件搜索 -->
                            <el-row :gutter="5" class="header_card">
                                <el-col :span="6">
                                    <!-- 时间选择器  -->
                                    <div class="block">
                                        <el-date-picker
                                          v-model="value2"
                                          type="daterange"
                                          align="right"
                                          unlink-panels
                                          range-separator="至"
                                          start-placeholder="开始日期"
                                          end-placeholder="结束日期"
                                          :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <el-input
                                    placeholder="请输入主播昵称"
                                    v-model="nickname"
                                    clearable>
                                  </el-input>
                                </el-col>
                                <el-col :span="4">
                                    <el-input
                                    placeholder="请输入房间号"
                                    v-model="roomNum"
                                    clearable>
                                  </el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                                </el-col>
                                <el-col :span="2" :offset="4">
                                    <el-button type="info">导出数据<i class="el-icon-right"></i></el-button>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="info">上传数据<i class="el-icon-upload el-icon--right"></i></el-button>
                                </el-col>
                            </el-row>
                            <!--      表格展示用户列表-->
                            <el-table style="width: 100%" :data="anchorList.anchorData" stripe>
                                <el-table-column type="index" width="100" align="center" label="序号"></el-table-column>
                                <el-table-column label="uid" align="center" prop="uid"></el-table-column>
                                <el-table-column label="昵称" align="center" prop="nickname"></el-table-column>
                                <el-table-column label="房间号" align="center" prop="roomNum"></el-table-column>
                                <el-table-column label="日期" align="center" prop="date"></el-table-column>
                                <el-table-column label="经纪人" align="center" prop="agent"></el-table-column>
                                <el-table-column label="有效直播时长" align="center" prop="effectLiveDuration"></el-table-column>
                                <el-table-column label="DAU" align="center" prop="DAU"></el-table-column>
                                <el-table-column label="人气峰值" align="center" prop="peakValue"></el-table-column>
                                <el-table-column label="粉丝数" align="center" prop="fans"></el-table-column>
                                <el-table-column label="全部直播收益（金瓜子）" align="center" prop="incomeTotal"></el-table-column>
                                <el-table-column label="特殊直播收益（金瓜子）" align="center" prop="incomeSpecial"></el-table-column>
                                <el-table-column label="运营奖惩" align="center" prop="rewardsPunishmentAgent"></el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini">数据明细</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <!--分页管理-->
                            <div class="block">
                            <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[1, 2, 4, 10]"
                            :current-page.sync="queryInfo.pagenum"
                            :page-size="queryInfo.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="anchorList.total">
                            </el-pagination>
                            </div>
                        </el-card>
                    </div>
                </div>
                
              </el-main>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data () {
            return {
                queryInfo:{
                    query:'',
                    pagenum:1,
                    pagesize:4
                },
                anchorList: {
                    total: 0,
                    currentPage: 2,
                    anchorData:[]
                },
                anchorDatabase: [{
                        uid: 132465,
                        nickname: '皮蛋',
                        roomNum: 46884,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 45,
                        DAU: 79789,
                        peakValue: 18911,
                        fans: 4562,
                        incomeTotal: 805,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: 543
                    }, {
                        uid: 132465,
                        nickname: '闲蛋',
                        roomNum: 46514,
                        agent: "张四",
                        date: '2020-05-02',
                        effectLiveDuration: 451,
                        DAU: 7978,
                        peakValue: 1891,
                        fans: 456,
                        incomeTotal: 80,
                        incomeSpecial: 10,
                        rewardsPunishmentAgent: 533
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮皮',
                        roomNum: 46546,
                        agent: "张三",
                        date: '2020-05-02',
                        effectLiveDuration: 145,
                        DAU: 7789,
                        peakValue: 189111,
                        fans: 45622,
                        incomeTotal: 8055,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: -5430
                    }, {
                        uid: 132465,
                        nickname: '皮蛋丹丹丹丹',
                        roomNum: 14654,
                        agent: "王五",
                        date: '2020-05-02',
                        effectLiveDuration: 405,
                        DAU: 789,
                        peakValue: 18,
                        fans: 62,
                        incomeTotal: 80,
                        incomeSpecial: 0,
                        rewardsPunishmentAgent: 43
                    }],
                // 时间选择器
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
                nickname: '',
                roomNum: ''
            };
        },
        created () {
            this.getAnchorList()
        },
        methods: {
        	toUsers () {
                window.location.href = "/user/index"
            },
            toAnchors () {
                window.location.href = "/user/anchors"
            },
            toData () {
                window.location.href = "/user/data"
            },
            toTask () {
                window.location.href = "/user/tasks"
            },
            getAnchorList () {
                console.log(this.anchorList)
                // let maxpage = Math.ceil( this.anchorDatabase.length / this.pagesize )
                console.log(this.queryInfo.pagenum)
                let i = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize
                this.anchorList.anchorData = this.anchorDatabase.slice( i , i + this.queryInfo.pagesize)
                console.log(this.anchorList.anchorData)
                this.anchorList.total = this.anchorDatabase.length
            },
            //改变每页显示大小
            handleSizeChange (newSize) {
                this.queryInfo.pagesize = newSize
                this.anchorList.currentPage = newSize
                this.getAnchorList()
            },
            //监听页码值
            handleCurrentChange (newPage) {
                this.queryInfo.pagenum = newPage
                this.anchorList.currentPage = newPage
                this.getAnchorList()
            }
        }
    })
</script>
</html>